<!-- 我的 -->
<template>
    <div class="my">
        <div class="my-header">
            <van-row gutter="20">
                <van-col span="8">
                    <router-link to="/Index" style="color:black">
                        <van-icon name="arrow-left" />
                    </router-link>
                </van-col>
                <van-col span="8" align="center">个人中心</van-col>
            </van-row>
        </div>
        <div>
            <template v-if="this.$store.state.loginControl">
                <div class="my-title1">
                    <div class="title1-left">
                        <img src="https://img02.hua.com/m/member/center/myinfo_pendingpay.png" alt="" />
                    </div>
                    <div class="title1-right">
                        <p>{{ phone }}</p>
                        <span @click="handleBack">退出登录</span>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="my-title">
                    <p>Hi,欢迎来到花礼网</p>
                    <van-button type="default" to="/Login" @click="LoginCtrol">登录/注册</van-button>
                </div>

            </template>
        </div>
        <!-- </template> -->
        <div class="my-order">
            <van-row type="flex" justify="space-between">
                <van-col span="6" style="margin-left:.2rem">我的订单</van-col>
                <van-col span="6">
                    <router-link style="color:black" to="/">全部订单></router-link>
                </van-col>
            </van-row>
            <div class="list-top">
                <van-grid :border="false">
                    <van-grid-item style="margin-left:.4rem"
                        icon="https://img02.hua.com/m/member/center/myinfo_pendingpay.png" to="/" text="待付款" />
                    <van-grid-item style="margin-left:.5rem"
                        icon="https://img02.hua.com/m/member/center/myinfo_distribution.png" to="/" text="今日配送" />
                    <van-grid-item style="margin-left:.5rem"
                        icon="https://img02.hua.com/m/member/center/myinfo_evaluation.png" to="/" text="评价有礼" />
                </van-grid>
            </div>
        </div>

        <div class="my-list">
            <div class="list-top">
                <van-grid :gutter="10" :border="false">
                    <van-grid-item to="/" icon="coupon-o" text="优惠券" />
                    <van-grid-item to="/" icon="vip-card-o" text="权益卡" />
                    <van-grid-item to="/" icon="after-sale" text="余额" />
                    <van-grid-item to="/" icon="location-o" text="收货地址" />
                </van-grid>
                <div class="list-bottom">
                    <van-grid :border="false">
                        <van-grid-item to="/" style="margin-left:.1rem" icon="underway-o" text="生日纪念提醒" />
                        <van-grid-item to="/" icon="star-o" text="我的收藏" />
                        <van-grid-item to="/" icon="clock-o" text="浏览记录" />
                    </van-grid>
                </div>
            </div>
        </div>
        <div class="my-bottom">
            <van-grid :gutter="10" :border="false">
                <van-grid-item to="/" icon="service-o" text="联系客服" />
                <van-grid-item to="/" icon="question-o" text="帮助中心" />
                <van-grid-item to="/" icon="info-o" text="关于花礼" />
                <van-grid-item to="/" icon="setting-o" text="文字" />
            </van-grid>
        </div>
    </div>
</template>

<script>
export default {
    name: "my",
    data() {
        return {
            phone: '',
        }
    },
    computed: {
        // getStorageStatus() {
        //     return localStorage.getItem('phone');
        // }
    },
    methods: {
        LoginCtrol() {
            this.phone = localStorage.getItem('phone')
        },
        handleBack() {
            localStorage.removeItem('phone')
            this.$store.commit('quitLogin', 0)
        }
    },
    mounted() {
        this.LoginCtrol()
    },
}
</script>
<style lang="less" scoped>
.my {
    width: 100vw;
    height: 100vh;
    background: url('https://img02.hua.com/m/member/center/backgroundv3.png') no-repeat #E9ECF0;
    background-size: 100% 22%;

    .my-header {
        width: 100%;
        overflow: hidden;
        background-color: #fff;
        line-height: 1rem;
        font-size: .36rem;
    }

    .my-title1 {
        display: flex;
        justify-content: baseline;
        flex-wrap: wrap;
        align-items: center;
        margin-top: .5rem;
        text-align: center;

        .title1-left {
            width: 1.5rem;
            height: 1.5rem;
            // height: 2rem;
            margin-left: 1.5rem;
            // background-color: aqua;
            border-radius: 50%;

            img {
                // margin-top: .2rem;
                width: 1.5rem;
                height: 1.5rem;
            }
        }

        .title1-right {
            margin-left: .5rem;

            p {
                margin-bottom: .2rem;
                color: #fff;
                font-size: .30rem;
            }

            span {
                width: .5rem;
                height: 1rem;
                background: orange;
                color: #fff;
                padding: .1rem;
                // outline: none;
                border-radius: 50px;
                font-weight: bold;
            }
        }
    }

    .my-title {
        width: 100vw;
        overflow: hidden;
        text-align: center;
        margin-top: .5rem;
        font-size: .30rem;
        color: #fff;

        p {
            margin-bottom: 1em;
        }

        button {
            padding: 0 .6rem;
            outline: none;
            border-radius: 50px;
            font-weight: bold;
        }
    }

    .my-order {
        width: 7rem;
        margin: 0 auto;
        margin-top: .2rem;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        font-size: .30rem;
        // padding: 0 .2rem;
        line-height: 1rem;
        border-radius: .1rem;
        margin-bottom: .2rem;

        .list-top {
            border-top: 1px solid #ccc;
        }
    }

    .my-list {
        background: #fff;
        // width: calc(7.5rem-.4rem);
        width: 7.1rem;
        margin: 0 auto;
        // padding: 0 .2rem;
        border-radius: .1rem;
        margin-bottom: .2rem;

        .list-bottom {

            // overflow: hidden;

            // margin-top: .8rem;
            background: #fff;
            // border-radius: .1rem;
            // padding-left: .2rem;
            border-top: 1px solid #ccc;
        }
    }

    .my-bottom {
        background: #fff;
        width: 7rem;
        margin: 0 auto;
        // padding: 0 .2rem;
        border-radius: .1rem;
        margin-bottom: .2rem;
    }
}
</style>